<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html class=" -webkit-">
	<head>		
		<meta charset="utf-8">
		<title>微引擎公众号管理平台</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492648593" media="all">
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/prefixfree.min.js?v=1492648593"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/js/zepto.min.js"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/js/flipsnap.min.js?v=1492676217"></script>
		<link href="${ctxStatic}/jiu/css/common.css?v=1492676217" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="${ctxStatic}/jiu/css/style.css" />
		
		
		<style>
			 .ping {
				background-color: #F5C928;
			    border: 1px solid #F5C928;			 
			    width: 45px;
			    height: 30px;
			    line-height: 5px;
			    font-size: 14px;
			    color: #4E4C4C;
			}
			.info{
				margin-left: 30px;
			}
			.hao{
				overflow: hidden;width: 98%;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 16px;
			}
			.order_list{
				padding: 10px;
			}
			.goods{
				position: relative;
			    padding-left: 70px;
			 }
			.goods img{
				width: 90px;
				height: 90px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.xuanze {
					box-shadow: inset 0 1px 12px rgba(239, 239, 239, 0.5);
					padding-left: 5px;
					font-size: 16px;
					border:1px solid #eee;
					width: 94%;
					margin-left: 3%;
					margin-right: 3%;
					padding-left: 5px;
					margin-top: 20px;
				}
				
				select {
					height: 50px;
					line-height: 15px;
					border-radius: 3px;
					color: #666;
					width: 80%;
					margin-bottom: 15px;
					border: none;
					outline: none;
				}
				.tijiao {
					margin-top: 60px;
					cursor: pointer !important;
					width: 90%;
					height: 45px;
					line-height: 45px;
					background: #6BAAF9;
					color: #fff;
					font-size: 18px;
					margin-left: 5%;
					margin-right: 5%;
					margin-bottom: 10px;
					border-radius: 5px;
					border: 0px;
					text-align: center;
				}
				.quxiao{					
					cursor: pointer !important;
					width: 90%;
					height: 45px;
					line-height: 45px;
					background: #BBBBBB;
					color: #fff;
					font-size: 18px;
					margin-left: 5%;
					margin-right: 5%;
					margin-bottom: 20px;
					border-radius: 5px;
					border: 0px;
					text-align: center;
				}
				/*弹幕*/
				#dialogBg {
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				display: none;
			}
			
			#tanmu {
				width: 300px;
				height: 170px;
				display: none;
				background-color: #ffffff;
				position: fixed;
				top: 50%;
				left: 50%;
				margin: -85px 0 0 -150px;
				z-index: 10000;				
				border-radius: 5px;
				-webkit-border-radius: 5px;
				text-align: center;
			}
			
			.dialogTop {
				width: 90%;
                margin: 0 auto;
				border-bottom: 1px solid #eee;
				letter-spacing: 1px;
				text-align: center;
				font-size: 24px;
				color: #222222;
				margin-top: -5px;				
                padding: 3px 0;
			}
			.queren{
				margin-top: 5px;	
				border-right:1px solid #eee ;						
				box-sizing: border-box;
			    font-size: 16px;
			    text-align: center;
			    text-decoration: none;
			    overflow: hidden;
			    width: 50%;
			    height: 35px;
			    line-height: 35px;
			    float: left;
			    color: #30B0F3;
			}
			.fanhui{
				margin-top: 5px;	
				box-sizing: border-box;
			    font-size: 16px;
			    text-align: center;
			    text-decoration: none;
			    overflow: hidden;
			    width:50%;
			    height: 35px;
			    line-height: 35px;
			    float: right;
			    color: #B5B4B3;
			}
		</style>
	</head>
	<body class="withFoot" >
		<div class="top_tab" style="width: 100%;">
			<a href="#" class="">充值编辑</a>
		</div>
		<div class="" style="margin-top: 10px;background: #fff;">
				<div class="order_list">				
					<div class="goods">
					<c:choose>
					    <c:when test="${empty jiuStore.logo}">
					     <img src="${jiuStore.headimgurl}">
					    </c:when>
					    <c:otherwise>
					      <img src="${ctxUser }/jiu/${jiuStore.logo}">
					    </c:otherwise>
					</c:choose>
						<div class="info" >
							<p class="hao">${jiuStore.name}</p>
							<p class="property" style="margin-top: 15px;">
								<span>剩余总积分</span>
								<span class="orange">${jiuStore.point }积分</span>
							</p>
							<p class="property" >
								<span>充值积分</span>
								<span class="orange">${jiuRechargeLog.point }积分</span>
							</p>
							<p class="property">
								<span class="">充值金额</span>
								<span class="orange">${jiuRechargeLog.money }￥</span>
							</p>							
						 </div>																					
					</div>											
				 </div>		    
		  </div>
		  <div style="background: #fff;padding:10px;margin-top: 5px;">
		  	     请选择以下金额(元)进行修改
		  	<select class="xuanze" id="configId">
		  		<c:forEach items="${jiuRechargeConfigList}" var="jiuRechargeConfig" varStatus="vstatus">
					<option value="${jiuRechargeConfig.id}"> ￥<fmt:formatNumber value="${jiuRechargeConfig.money}" pattern="0.00"/>&nbsp;&nbsp;(送${jiuRechargeConfig.point}积分)</option>
				</c:forEach>
		  				<!-- <option>--请选择充值金额--</option>
		  				<option>123￥&nbsp;&nbsp;送100积分</option>
		  				<option>123￥&nbsp;&nbsp;送100积分</option>
		  				<option>123￥&nbsp;&nbsp;送100积分</option>
		  				<option>1123￥&nbsp;&nbsp;送100积分</option> -->
		  	</select>		  	
		  </div>
		 <div style="position:fixed;bottom: 10px;width: 100%;">
		 	<div class="tijiao" id="btns" >
				提&nbsp;&nbsp;交
		   </div>
		   <a href="javascript:WeixinJSBridge.call('closeWindow');">
		   <div class="quxiao">
				取&nbsp;&nbsp;消
		  </div>
		  </a>
		 </div>
		 <!--弹幕-->
		 <div id="dialogBg">
		</div>
		<div id="tanmu" class="">
			<div class="dialogTop">
				<span style="font-size: 19px;text-align: center;">温馨提示</span>
				<a href="javascript:;" class="closeDialog"><span style="color: #797978;float: right;">×</span></a>
			</div>
			 <div style="padding:30px 10px 5px 10px;">你确定要重新选择金额进行充值吗？</div>
			 <div style="border-bottom: 1px solid #eee;margin-top: 30px;">
			 	<div class="queren" onclick="submit()">确认提交</div>
			 	<div class="fanhui">取消</div>
			 </div>
		</div>
		
		  <script>
		  	 $(document).ready(function(){
		  	 	$('#btns').click(function() {
					$('#tanmu').fadeIn();
					$('#dialogBg').fadeIn(300);
				});
				$('.closeDialog').click(function() {
					$('#dialogBg').fadeOut();
					$('#tanmu').fadeOut();
				});
				$('#dialogBg').click(function() {
					$('#dialogBg').fadeOut();
					$('#tanmu').fadeOut();
				});
				$('.fanhui').click(function() {
					$('#dialogBg').fadeOut();
					$('#tanmu').fadeOut();
				});
		  	 });
		  	 
		  	 function submit(){
		  		 location.href = "${ctxFront }/jiuApply/modifyJiuRechargeLog?logId=${jiuRechargeLog.id}&configId="+$("#configId").val();
		  	 }
		   </script>				
	</body>
</html>